<template>
  <div>

	  
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品展示</h3>
				<div class="row">

					<!-- 遍历商品列表 -->

					<div v-for="item in datalist" class="col-sm-6 col-md-3 col-product">
						
						<h4><a :href="'/item?id='+item.id">{{ item.name }}</a></h4>
					
					</div>
					
				</div>


				<br />
					

					<!-- 自主分页 -->
					<br><br>
					<div>

						<a @click="getdata(lastpage)" v-show="lastpage">上一页</a>
						<ul>

							<li v-for="index in all">

								<a @click="getdata(index)">{{index}}</a>

							</li>
						</ul>

						<a @click="getdata(nextpage)" v-show="nextpage">下一页</a>
						
					</div>
				<br />

			</div>
		</section>
		
		
		
		
	
    
  </div>
  
</template>


 
<script>


export default {
  data () {
    return {
	  msg: "这是一个变量",
	//   自主分页
	total:0, //商品总数
	cur:1,	//当前页
	all:0,	//总页数
	lastpage:0, //上一页
	nextpage:0, //下一页
	size:5,

	//   分页器变量
	pagination:{
      	page:1,
      	size:3,
      	total:5
	},
	//商品列表
    datalist:[],
	
    }
  },
  //注册组件标签
  components:{

  	

  },
mounted:function(){

	// 调用自主分页接口
	this.getdata(1);

	// //请求商品接口
  	// //发送请求
    //   this.axios.get('http://localhost:8000/goodslist/',{params:{page:1,size:3}}).then((result) =>{

    //           console.log(result);
    //           this.datalist = result.data.data;

	//   });
	  
	
  
},
  methods:{

	  //自主分页接口
	  getdata:function(mypage){
		  
			//发送请求
		this.axios.get('http://localhost:8000/goodslist1/',{params:{page:mypage,size:this.size}}).then((result) =>{

				console.log(result);
				this.datalist = result.data.data;
				
				// 判断上一页
				if(mypage==1){

					this.lastpage = 0;

				}else{

					this.lastpage = mypage - 1;

				}
				
				// 计算总页数
				this.all = Math.ceil(result.data.total / this.size);

				// 判断下一页
				if(mypage==this.all){

					this.nextpage = 0;

				}else{

					this.nextpage = mypage + 1;
					
				}
		});


	  },
	//分页器事件
  	change:function(){


  		//发送请求
      this.axios.get('http://localhost:8000/goodslist1/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((result) =>{

              console.log(result);
              this.datalist = result.data.data;

      });

  	},

	
     
  }
}


</script>
 
<style>



</style>


// --------------------------------------------------------------------------------------------------------------------------



